import React from "react";
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import Button from './components/button'
import { Menu, MenuItem, SubMenu } from 'components/menu'
import AutoComplete, { DataSourceType } from './components/input/autoComplet'
import Upload from './components/upload'
import Icon from './components/icon'
import Alert from './components/Alert'
import { Select, Option } from './components/Select'

library.add(fas)

interface LakerPlayerProps {
  value: String,
  number: Number
}
const App: React.FC = () => {
  // input相关
  const handleFetch = (query: string) => {
    return fetch(`https://api.github.com/search/users?q=${query}`)
      .then(res => res.json())
      .then(({ items }) => {
        return items.slice(0, 10).map((item: any) => ({ value: item.login, ...item }))
      })
  }
  const onSelect = (item: DataSourceType) => {

    console.log(item);
  }
  const renderOption = (item: DataSourceType) => {
    const itemWithNumber = item as DataSourceType<LakerPlayerProps>
    return (
      <>
        <b> {itemWithNumber.value}</b>
      </>
    )
  }
  // upload相关
  const handleError = (err: any) => {
    // console.log(err);
  }
  const handleProgress = (num: number, file: File) => {
    // console.log(1);
    // console.log(num);
  }
  const handleSuccess = (res: any) => {
    // console.log(res);
  }
  // const beforeUpload1 = (file: File) => {
  //   if (Math.round(file.size / 1024) > 50) {
  //     alert('最大为50kb')
  //     return false
  //   }
  //   return true
  // }
  const beforeUpload2 = (file: File) => {
    const newFile = new File([file], 'new_name', { type: file.type })
    return Promise.resolve(newFile)
  }

  return (
    <div>
      {/* <Icon icon="coffee" theme='danger' size='6x' /> */}

      <Button btnType='primary'>按钮</Button>
      {/* mode='vertical' */}
      <Menu >
        <MenuItem disabled={true}>111</MenuItem>
        <MenuItem >111</MenuItem>
        <MenuItem >111</MenuItem>
        <SubMenu title='aaa'>
          <MenuItem>111</MenuItem>
          <MenuItem >111</MenuItem>
        </SubMenu>
      </Menu>
      <div>
        <AutoComplete placeholder="输入湖人队球员英文名试试" fetchSuggestions={handleFetch}
          onSelect={onSelect} renderOption={renderOption} />
      </div>
      <div>
        <Upload action='https://www.mocky.io/v2/5cc8019d300000980a055e76'
          onError={handleError} onProgress={handleProgress} onSuccess={handleSuccess}
          beforeUpload={beforeUpload2} drag
        >
          <Icon icon="upload" size="5x" theme="secondary" />
          <br />
          <p>Drag file over to upload</p>
        </Upload>
      </div>


      <b>-----------------------------</b>
      <Alert title='我是标题' type='success'></Alert>

      <div>--------------------</div>
      <Select
        multiple
        name="viking-select"
        placeholder="支持多选欧！"
      >
        <Option value="nihao" disabled />
        <Option value="nihao2" />
        <Option value="nihao3" />
      </Select>
    </div >
  );
};

export default App;
